<template>
  <div>
    <!-- 新增假期计薪规则 -->
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="span1">编辑旷假期计薪规则</span>
        </div>
        <div class="text item1">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="方案名称" prop="name">
              <el-input v-model="ruleForm.name" class="input1"></el-input>
              <el-checkbox
                label="默认"
                name="type"
                style="margin-left: 20px"
              ></el-checkbox>
            </el-form-item>
            <el-form-item label="状态" prop="delivery">
              <el-switch v-model="ruleForm.delivery"></el-switch>
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                type="textarea"
                :autosize="{ minRows: 5, maxRows: 10 }"
                placeholder="请输入内容"
                v-model="textarea2"
                class="input2"
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
    <!-- 事假 -->
    <div class="div1">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="span1">事假</span>
          <span
            style="float: right; padding: 3px 0"
            type="text"
            @click="shows()"
          >
            <input type="checkbox" v-model="checkbox1" />不设置
          </span>
        </div>
        <div class="div2">
          <el-form
            ref="form"
            :model="form"
            label-width="100px"
            style="padding: 0px 5px 0 0"
          >
            <el-form-item label="计薪规则:">
              <!-- 单选框判断显示那个 -->
              <el-radio-group v-model="form.resource">
                <el-radio :label="2" @input="form.resource = '2'"
                  >固定金额</el-radio
                >
                <el-radio :label="1" @input="form.resource = '1'"
                  >引用基数</el-radio
                >
              </el-radio-group>
            </el-form-item>
            <!-- 如果选择的是固定金额展示这个 -->
            <div v-if="form.resource === 2">
              <!-- 计薪比例 -->
              <el-form-item label="扣款金额:">
                <el-input v-model="form.momey" style="width: 50%"></el-input>
                <span style="margin-left: 10px; font-size: 18px">元/天</span>
              </el-form-item>
            </div>
            <!-- 如果选择的是引用基数显示这个 -->
            <div v-if="form.resource === 1">
              <!-- 计算基数 -->
              <el-form-item label="计算基数:">
                <el-input type="textarea" disabled class="textarea1"></el-input>
                <el-button
                  plain
                  style="
                    margin-left: 20px;
                    margin-bottom: 21px;
                    padding: 8px 14px;
                    font-size: 10px;
                  "
                  @click="dialogVisible = true"
                  >设置</el-button
                >
              </el-form-item>
              <!-- 对话框 -->
              <el-dialog
                title="基数配置"
                :visible.sync="dialogVisible"
                width="50%"
                :before-close="handleClose"
                style="border-bottom: 5px solid"
              >
                <div>
                  <span style="margin-top: 18px; float: left">加班基数= </span>
                  <span
                    style="
                      width: 85%;
                      min-height: 50px;
                      display: inline-block;
                      margin-left: 19px;
                      border: 1px solid red;
                      border-radius: 5px;
                      margin-right: 50px;
                      line-height: 50px;
                    "
                  >
                    <span v-for="(item, index) in data1" :key="item.id">
                      <span
                        style="padding: 1px 2px 1px 2px; font-size: 15px"
                        v-if="data1.length > 1 && index != 0"
                        >+</span
                      >
                      <span
                        style="
                          padding: 2px 20px 2px 5px;
                          border: 1px solid #00aaff;
                          border-radius: 3px;
                          margin-left: 5px;
                          color: #00aaff;
                        "
                        >{{ item.name }}</span
                      >
                      <span
                        style="
                          padding: 2px 5px 2px 5px;
                          border-top: 1px solid #00aaff;
                          border-right: 1px solid #00aaff;
                          border-bottom: 1px solid #00aaff;
                          border-radius: 3px;
                          color: #00aaff;
                        "
                        @click="del1(item.id)"
                        >X</span
                      >
                    </span>
                  </span>
                </div>
                <div>
                  <div
                    style="
                      width: 95%;
                      display: inline-block;
                      border: 1px solid red;
                      border-radius: 3px;
                      height: 100%;
                      margin-top: 20px;
                    "
                  >
                    <div class="" style="display: flex; flex-wrap: wrap">
                      <div
                        class="item"
                        v-for="item in datas"
                        :key="item.id"
                        :class="item.checked === true ? 'select' : ''"
                        @click="checkeds(item.id)"
                      >
                        <div class="shift" style="width: 85px">
                          {{ item.name }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="dialogVisible = false"
                    >确 定</el-button
                  >
                </span>
              </el-dialog>
              <!-- 扣款百分比 -->
              <el-form-item label="扣款百分比:">
                <el-input v-model="form.bili" style="width: 50%"></el-input>
                <span style="margin-left: 10px; font-size: 18px">%</span>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </el-card>
    </div>
    <!-- 底部栏 -->
    <div class="bottom">
      <el-card class="box-card1">
        <el-button plain @click="$router.push('/home/people')">返回</el-button>
        <el-button plain>取消</el-button>
        <el-button type="primary" plain>保存</el-button>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //新增假期计薪规则
      ruleForm: {
        name: "",
        delivery: true,
      },
      //新增假期计薪规则输入的规范
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      //新增假期计薪规则的多行文本框
      textarea2: "",
      //判断表单是否显示
      checkbox1: false,
      //数据
      form: {
        region: "1",
        resource: 1,
        bili: "100",
        xing: "0",
        day: "8",
        days: "21.75",
        days1: "8",
        momey: "",
      },
      //对话框
      dialogVisible: false,
      //设置弹出框的数据
      datas: [
        {
          id: 1,
          name: "基本工资",
          checked: false,
        },
        {
          id: 2,
          name: "岗位工资",
          checked: false,
        },
        {
          id: 3,
          name: "职务工资",
          checked: false,
        },
        {
          id: 4,
          name: "交通补贴",
          checked: false,
        },
        {
          id: 5,
          name: "住房补贴",
          checked: false,
        },
        {
          id: 6,
          name: "餐补",
          checked: false,
        },
        {
          id: 7,
          name: "夜班津贴",
          checked: false,
        },
        {
          id: 8,
          name: "通讯补贴",
          checked: false,
        },
        {
          id: 9,
          name: "节假日补贴",
          checked: false,
        },
        {
          id: 10,
          name: "员工慰问金",
          checked: false,
        },
        {
          id: 11,
          name: "冬季取暖津贴",
          checked: false,
        },
        {
          id: 12,
          name: "差旅补贴",
          checked: false,
        },
        {
          id: 13,
          name: "绩效工资",
          checked: false,
        },
        {
          id: 14,
          name: "季度奖",
          checked: false,
        },
        {
          id: 15,
          name: "全勤奖",
          checked: false,
        },
        {
          id: 16,
          name: "销售提成",
          checked: false,
        },
        {
          id: 17,
          name: "工龄工资",
          checked: false,
        },
        {
          id: 18,
          name: "司龄工资",
          checked: false,
        },
        {
          id: 19,
          name: "职称工资",
          checked: false,
        },
        {
          id: 20,
          name: "技能工资",
          checked: false,
        },
      ],
      //计算的数据
      data1: [],
    };
  },
  methods: {
    //判断事假是否显示的方法
    shows() {
      let div2 = document.querySelector(".div2");
      this.checkbox1 = !this.checkbox1;
      if (this.checkbox1) {
        div2.style.display = "none";
      } else {
        div2.style.display = "block";
      }
    },
    //关闭对话框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    /** 判断事假选中 */
    checkeds(id) {
      let idx = this.datas.findIndex((item) => item.id === id);
      this.datas[idx].checked = !this.datas[idx].checked;
      if (this.datas[idx].checked) {
        let index1 = this.data1.findIndex((item) => item.id === id);
        if (index1 === -1) {
          this.data1.push(this.datas[idx]);
        }
      } else {
        let index = this.data1.findIndex((item) => item.id === id);
        this.data1.splice(index, 1);
      }
    },
    //删除事假的选中
    del1(id) {
      let idx = this.data1.findIndex((item) => item.id === id);
      this.data1.splice(idx, 1);
      let index = this.datas.findIndex((item) => item.id === id);
      this.datas[index].checked = false;
    },
  },
};
</script>

<style scoped>
.span1 {
  font-size: 18px;
  font-weight: bold;
}
.box-card {
  width: 80%;
}
.input1 {
  width: 450px;
  height: 35px;
}
.bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  margin-left: -20px;
}
.div1 {
  margin-top: 20px;
  margin-bottom: 100px;
}
.textarea1 {
  width: 50%;
}
.item {
  /* border: 1px #aaaaaa solid; */
  padding: 2px 15px 2px 2px;
  border-radius: 5px;
  margin: 1vh 1vw;
  font-size: 12px;
  box-sizing: border-box;
  box-shadow: none;
  color: #657180;
  border-width: 1px;
  border-style: solid;
  font-family: "微软雅黑", sans-serif;
  text-align: center;
}
.item:hover {
  border: 1px solid #00aaff;
  color: #00aaff;
}
.select {
  text-align: center;
  position: relative;
  /* text-align: left; */
  color: #00aaff;
  background-color: #fff;
  box-shadow: 0px 2px 7px 0px rgba(85, 110, 97, 0.35);
  border-radius: 5px;
  border: 1px solid #00aaff;
}

.select:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  border: 10px solid #00aaff;
  border-top-color: transparent;
  border-left-color: transparent;
}

.select:after {
  content: "";
  width: 4px;
  height: 6px;
  position: absolute;
  right: 4px;
  bottom: 3px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(45deg);
  border-left-color: transparent;
  transform: rotate(45deg);
}
</style>